<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.bigbox{
				display: flex;
					/*决定主轴的方向:
			 1.row:默认值,水平方向,从左往右
				2.row-reverse:主轴为水平轴,从右往左
				3.column:主轴为垂直,从上往下
				4.column-reverse:主轴为垂直,从下往上 */
				
				/* flex-direction:row;*/ 
				/* 决定主轴换行:
				1.nowarp:不换行 
				2.wrap:换行
				3.wrap-reverse:换行且反转*/
			 	/*flex-wrap: wrap-reverse; */
				/* 复合写法: */
				flex-flow:row wrap;
				justify-content: space-between;
				项目在主轴的排列:
				1.flex-start:从主轴的开始位置排,默认值
				2.flex-end:从主轴结束位置排
				3.center:在主轴上居中
			4.spac-between:两端对齐,重点
			5.space-around:环绕对齐,牵手对齐
				width: 1300px;
				height: 600px;
				border: 1px solid gray;
			}
			.bigbox div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				font-size: 34px;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div >1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div >6</div>
		</div>
	</body>
</html>
